﻿<%@ Page Language="C#" MasterPageFile="Layout/Sample.master" AutoEventWireup="true" CodeBehind="FormViewSample.aspx.cs" Inherits="SampleWebsite.FormViewSample"
    Title="Access Key Highlighter Sample" %>
<%@ Register Src="~/Controls/AccessKeyHighlighterOptions.ascx" TagPrefix="uc" TagName="Options" %>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="content">
    <h3>Access Key Highlighter: FormView Form Example</h3>
    <p class="sample-description">
        This page shows an example of using the AccessKeyHighlighter with an ASP.NET FormView control. Hold down the
        <asp:Literal ID="litAccessKeyShortcut" runat="server">Alt key</asp:Literal> to see the access keys on this
        form highlighted.
    </p>
    <uc:Options ID="options" runat="server" />
    
    <div class="form customer-form">
        <asp:FormView ID="fvCustomer" runat="server" DefaultMode="Edit"
            DataSourceID="odsCustomer" DataKeyNames="Id" AllowPaging="false">
            <InsertItemTemplate>
                <h4>Create Customer</h4>
                <fieldset class="personal-details">
                    <legend>Personal Details</legend>
                    <ol>
                        <li class="first-name">
                            <asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" CssClass="required-field">First Name:</asp:Label>
                            <asp:TextBox ID="txtFirstName" runat="server" MaxLength="32" AccessKey="F"
                                ToolTip="First Name" Text='<%# Bind("FirstName") %>' />
                            <ul class="validation-errors">
                                <li><asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName"
                                        Display="Dynamic" ValidationGroup="Customer" ErrorMessage="'First Name' is a required field" /></li>
                            </ul>
                        </li>
                        <li class="last-name">
                            <asp:Label ID="lblLastName" runat="server" AssociatedControlID="txtLastName">Last Name:</asp:Label>
                            <asp:TextBox ID="txtLastName" runat="server" MaxLength="32" AccessKey="L"
                                ToolTip="Last Name" Text='<%# Bind("LastName") %>' />
                        </li>
                        <li class="date-of-birth">
                            <asp:Label ID="lblDateOfBirth" runat="server" AssociatedControlID="txtDateOfBirth">Date of birth:</asp:Label>
                            <asp:TextBox ID="txtDateOfBirth" runat="server" MaxLength="11" AccessKey="B"
                                ToolTip="Date of birth, format dd-MMM-yyyy" Text='<%# Bind("DateOfBirth", "{0:dd-MMM-yyyy}") %>' />
                            <ajax:CalendarExtender ID="calDateOfBirth" runat="server" TargetControlID="txtDateOfBirth" Format="dd-MMM-yyyy" />
                        </li>
                    </ol>
                </fieldset>
                <fieldset class="contact-details">
                    <legend>Contact Details</legend>
                    <ol>
                        <li class="home-phone">
                            <asp:Label ID="lblHomePhone" runat="server" AssociatedControlID="txtHomePhone">Home phone:</asp:Label>
                            <asp:TextBox ID="txtHomePhone" runat="server" MaxLength="20" AccessKey="H"
                                ToolTip="Home phone" Text='<%# Bind("HomePhone") %>' />
                        </li>
                        <li class="work-phone">
                            <asp:Label ID="lblWorkPhone" runat="server" AssociatedControlID="txtWorkPhone">Work phone:</asp:Label>
                            <asp:TextBox ID="txtWorkPhone" runat="server" MaxLength="20" AccessKey="W"
                                ToolTip="Work phone" Text='<%# Bind("WorkPhone") %>' />
                        </li>
                        <li class="mobile-phone">
                            <asp:Label ID="lblMobilePhone" runat="server" AssociatedControlID="txtMobilePhone">Mobile phone:</asp:Label>
                            <asp:TextBox ID="txtMobilePhone" runat="server" MaxLength="20" AccessKey="M"
                                ToolTip="Mobile phone" Text='<%# Bind("MobilePhone") %>' />
                        </li>
                        <li class="email">
                            <asp:Label ID="lblEmail" runat="server" AssociatedControlID="txtEmail" CssClass="required-field">E-mail:</asp:Label>
                            <asp:TextBox ID="txtEmail" runat="server" MaxLength="255" AccessKey="E"
                                ToolTip="E-mail" Text='<%# Bind("Email") %>' />
                            <ul class="validation-errors">
                                <li><asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
                                        Display="Dynamic" ValidationGroup="Customer"
                                        ErrorMessage="'E-mail' is a required field" /></li>
                                <li><cc:EmailValidator ID="emvEmail" runat="server" ControlToValidate="txtEmail"
                                        Display="Dynamic" ValidationGroup="Customer"
                                        ErrorMessage="Please enter a valid e-mail address, e.g. joe.citizen@tempuri.org" /></li>
                            </ul>
                        </li>
                    </ol>
                </fieldset>
                <fieldset class="home-address">
                    <legend>Home Address</legend>
                    <ol>
                        <li class="street-1">
                            <asp:Label ID="lblHomeStreet1" runat="server" AssociatedControlID="txtHomeStreet1">Street:</asp:Label>
                            <asp:TextBox ID="txtHomeStreet1" runat="server" MaxLength="128" AccessKey="T"
                                ToolTip="Street" Text='<%# Bind("HomeAddressStreet1") %>' />
                        </li>
                        <li class="street-2">
                            <asp:Label ID="lblHomeStreet2" runat="server" AssociatedControlID="txtHomeStreet2">&nbsp;</asp:Label>
                            <asp:TextBox ID="txtHomeStreet2" runat="server" MaxLength="128" AccessKey="Y"
                                 Text='<%# Bind("HomeAddressStreet2") %>' />
                        </li>
                        <li class="city">
                            <asp:Label ID="lblHomeCity" runat="server" AssociatedControlID="txtHomeCity">City:</asp:Label>
                            <asp:TextBox ID="txtHomeCity" runat="server" MaxLength="128" AccessKey="I"
                                ToolTip="City" Text='<%# Bind("HomeAddressCity") %>' />
                        </li>
                        <li class="state">
                            <asp:Label ID="lblHomeState" runat="server" AssociatedControlID="ddlHomeState">State:</asp:Label>
                            <asp:DropDownList ID="ddlHomeState" runat="server" AccessKey="A" ToolTip="State"
                                SelectedValue='<%# Bind("HomeAddressState") %>'>
                                <asp:ListItem Value="" Text="- select -" />
                                <asp:ListItem Value="ACT" Text="ACT" />
                                <asp:ListItem Value="NSW" Text="NSW" />
                                <asp:ListItem Value="NT" Text="NT" />
                                <asp:ListItem Value="QLD" Text="QLD" />
                                <asp:ListItem Value="SA" Text="SA" />
                                <asp:ListItem Value="TAS" Text="TAS" />
                                <asp:ListItem Value="VIC" Text="VIC" />
                                <asp:ListItem Value="WA" Text="WA" />
                            </asp:DropDownList>
                        </li>
                        <li class="post-code">
                            <asp:Label ID="lblHomePostCode" runat="server" AssociatedControlID="txtHomePostCode">Post code:</asp:Label>
                            <asp:TextBox ID="txtHomePostCode" runat="server" MaxLength="6" AccessKey="P"
                                ToolTip="Post code" Text='<%# Bind("HomeAddressPostCode") %>' />
                        </li>
                    </ol>
                </fieldset>
                <dl class="legend">
                    <dt class="required-field">This is a required field</dt>
                    <dd>indicates a required field</dd>
                </dl>
                <fieldset class="actions">
                    <ul>
                        <li class="default save">
                            <asp:Button ID="btnSave" runat="server" Text="Save" ValidationGroup="Customer"
                                CommandName="Insert" AccessKey="S" ToolTip="Save" />
                        </li>
                        <li class="cancel">
                            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false"
                                CommandName="Cancel" AccessKey="C" ToolTip="Cancel" />
                        </li>
                    </ul>
                </fieldset>
            </InsertItemTemplate>
            <EditItemTemplate>
                <h4>Edit Customer</h4>
                <asp:HiddenField ID="hidCustomerId" runat="server" Value='<%# Bind("Id") %>' />
                <fieldset class="personal-details">
                    <legend>Personal Details</legend>
                    <ol>
                        <li class="first-name">
                            <asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" CssClass="required-field">First Name:</asp:Label>
                            <asp:TextBox ID="txtFirstName" runat="server" MaxLength="32" TabIndex="1" AccessKey="F"
                                ToolTip="First Name" Text='<%# Bind("FirstName") %>' />
                            <ul class="validation-errors">
                                <li><asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName"
                                        Display="Dynamic" ValidationGroup="Customer" ErrorMessage="'First Name' is a required field" /></li>
                            </ul>
                        </li>
                        <li class="last-name">
                            <asp:Label ID="lblLastName" runat="server" AssociatedControlID="txtLastName">Last Name:</asp:Label>
                            <asp:TextBox ID="txtLastName" runat="server" MaxLength="32" TabIndex="2" AccessKey="L"
                                ToolTip="Last Name" Text='<%# Bind("LastName") %>' />
                        </li>
                        <li class="date-of-birth">
                            <asp:Label ID="lblDateOfBirth" runat="server" AssociatedControlID="txtDateOfBirth">Date of birth:</asp:Label>
                            <asp:TextBox ID="txtDateOfBirth" runat="server" MaxLength="11" TabIndex="3" AccessKey="B"
                                ToolTip="Date of birth" Text='<%# Bind("DateOfBirth", "{0:dd-MMM-yyyy}") %>' />
                            <ajax:CalendarExtender ID="calDateOfBirth" runat="server" TargetControlID="txtDateOfBirth" Format="dd-MMM-yyyy" />
                            <ul class="validation-errors">
                                <%-- Add data validation --%>
                            </ul>
                        </li>
                    </ol>
                </fieldset>
                <fieldset class="contact-details">
                    <legend>Contact Details</legend>
                    <ol>
                        <li class="home-phone">
                            <asp:Label ID="lblHomePhone" runat="server" AssociatedControlID="txtHomePhone">Home phone:</asp:Label>
                            <asp:TextBox ID="txtHomePhone" runat="server" MaxLength="20" TabIndex="4" AccessKey="H"
                                ToolTip="Home phone" Text='<%# Bind("HomePhone") %>' />
                        </li>
                        <li class="work-phone">
                            <asp:Label ID="lblWorkPhone" runat="server" AssociatedControlID="txtWorkPhone">Work phone:</asp:Label>
                            <asp:TextBox ID="txtWorkPhone" runat="server" MaxLength="20" TabIndex="5" AccessKey="W"
                                ToolTip="Work phone" Text='<%# Bind("WorkPhone") %>' />
                        </li>
                        <li class="mobile-phone">
                            <asp:Label ID="lblMobilePhone" runat="server" AssociatedControlID="txtMobilePhone">Mobile phone:</asp:Label>
                            <asp:TextBox ID="txtMobilePhone" runat="server" MaxLength="20" TabIndex="6" AccessKey="M"
                                ToolTip="Mobile phone" Text='<%# Bind("MobilePhone") %>' />
                        </li>
                        <li class="email">
                            <asp:Label ID="lblEmail" runat="server" AssociatedControlID="txtEmail" CssClass="required-field">E-mail:</asp:Label>
                            <asp:TextBox ID="txtEmail" runat="server" MaxLength="255" TabIndex="7" AccessKey="E"
                                ToolTip="E-mail" Text='<%# Bind("Email") %>' />
                            <ul class="validation-errors">
                                <li><asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
                                        Display="Dynamic" ValidationGroup="Customer"
                                        ErrorMessage="'E-mail' is a required field" /></li>
                                <li><cc:EmailValidator ID="emvEmail" runat="server" ControlToValidate="txtEmail"
                                        Display="Dynamic" ValidationGroup="Customer"
                                        ErrorMessage="Please enter a valid e-mail address, e.g. joe.citizen@tempuri.org" /></li>
                            </ul>
                        </li>
                    </ol>
                </fieldset>
                <fieldset class="home-address">
                    <legend>Home Address</legend>
                    <ol>
                        <li class="street-1">
                            <asp:Label ID="lblHomeStreet1" runat="server" AssociatedControlID="txtHomeStreet1">Street:</asp:Label>
                            <asp:TextBox ID="txtHomeStreet1" runat="server" MaxLength="128" TabIndex="8" AccessKey="T"
                                ToolTip="Street" Text='<%# Bind("HomeAddressStreet1") %>' />
                        </li>
                        <li class="street-2">
                            <asp:Label ID="lblHomeStreet2" runat="server" AssociatedControlID="txtHomeStreet2">&nbsp;</asp:Label>
                            <asp:TextBox ID="txtHomeStreet2" runat="server" MaxLength="128" TabIndex="9" AccessKey="Y"
                                 Text='<%# Bind("HomeAddressStreet2") %>' />
                        </li>
                        <li class="city">
                            <asp:Label ID="lblHomeCity" runat="server" AssociatedControlID="txtHomeCity">City:</asp:Label>
                            <asp:TextBox ID="txtHomeCity" runat="server" MaxLength="128" TabIndex="10" AccessKey="I"
                                ToolTip="City" Text='<%# Bind("HomeAddressCity") %>' />
                        </li>
                        <li class="state">
                            <asp:Label ID="lblHomeState" runat="server" AssociatedControlID="ddlHomeState">State:</asp:Label>
                            <asp:DropDownList ID="ddlHomeState" runat="server" TabIndex="11" AccessKey="A" ToolTip="State"
                                SelectedValue='<%# Bind("HomeAddressState") %>'>
                                <asp:ListItem Value="" Text="- select -" />
                                <asp:ListItem Value="ACT" Text="ACT" />
                                <asp:ListItem Value="NSW" Text="NSW" />
                                <asp:ListItem Value="NT" Text="NT" />
                                <asp:ListItem Value="QLD" Text="QLD" />
                                <asp:ListItem Value="SA" Text="SA" />
                                <asp:ListItem Value="TAS" Text="TAS" />
                                <asp:ListItem Value="VIC" Text="VIC" />
                                <asp:ListItem Value="WA" Text="WA" />
                            </asp:DropDownList>
                        </li>
                        <li class="post-code">
                            <asp:Label ID="lblHomePostCode" runat="server" AssociatedControlID="txtHomePostCode">Post code:</asp:Label>
                            <asp:TextBox ID="txtHomePostCode" runat="server" MaxLength="6" TabIndex="12" AccessKey="P"
                                ToolTip="Post code" Text='<%# Bind("HomeAddressPostCode") %>' />
                        </li>
                    </ol>
                </fieldset>
                <dl class="legend">
                    <dt class="required-field">This is a required field</dt>
                    <dd>indicates a required field</dd>
                </dl>
                <fieldset class="actions">
                    <ul>
                        <li class="default save">
                            <asp:Button ID="btnSave" runat="server" Text="Save" ValidationGroup="Customer"
                                CommandName="Update" TabIndex="13" AccessKey="S" ToolTip="Save" />
                        </li>
                        <li class="cancel">
                            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false"
                                CommandName="Cancel" TabIndex="14" AccessKey="C" ToolTip="Cancel" />
                        </li>
                    </ul>
                </fieldset>
            </EditItemTemplate>
        </asp:FormView>
    </div>
    <cc:AccessKeyHighlighter ID="akh" runat="server" />
    
    <%-- Data Sources --%>
    <asp:ObjectDataSource ID="odsCustomer" runat="server"
        TypeName="SampleWebsite.Mappers.CustomerMapper" DataObjectTypeName="SampleWebsite.Domain.Customer"
        SelectMethod="SelectById"
        InsertMethod="Insert"
        UpdateMethod="Update"
        DeleteMethod="DeleteById">
        <SelectParameters>
            <asp:QueryStringParameter Name="id" DefaultValue="1" QueryStringField="id" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
</asp:Content>